<template>
  <div class="menu-wrapper">
    <el-form ref="sysMchForm" :model="form" label-width="80px">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px #eee solid;
          margin-bottom: 20px;
        "
      >
        <span style="font-size: 18px; color: #409eff; margin: 10px 0"
          >基本信息</span
        >
        <div>
          <el-button
            v-permission="['sysMch.edit']"
            type="primary"
            @click="editlist"
            >修改</el-button
          >
          <el-button
            v-permission="['sysMch.edit']"
            type="primary"
            @click="dialogShow"
            >菜单</el-button
          >
          <el-button
            v-permission="['sysMch.edit']"
            type="primary"
            @click="pluginClick"
            >插件</el-button
          >
          <el-button
            :disabled="renovationDisabled"
            type="primary"
            @click="initISVDataFn"
            >装修</el-button
          >
          <el-button type="primary" @click="resetPwd">重置</el-button>
        </div>
      </div>
      <el-form-item label="公司全程:">
          <span>{{ shopgetinfo.name }}</span>
      </el-form-item>
      <div style="display: flex;justify-content: flex-start;width: 80%;">
      <el-form-item label="商户简称:">
          <span>{{ shopgetinfo.shortName }}</span>
      </el-form-item>
      <el-form-item label="行业版本:"  style="margin-left:50px" prop="scopeType">
         <span>{{shopgetinfo.scopeType|mchTypeFormatter}}</span>
      </el-form-item>
      </div>
  <el-tabs v-model="activeName"  @tab-click="handleClick">
    <el-tab-pane label="店铺信息" name="first">
      <account  :shopgetinfo='shopgetinfo' :MuchShow='MuchShow' :district='district'></account>
    </el-tab-pane>
     <el-tab-pane label="商户资料" name="security">
    <security :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></security>
     </el-tab-pane>
     <el-tab-pane label="银行信息" name="bank">
       <banklist :shopgetinfo='shopgetinfo'></banklist>
     </el-tab-pane>
    <el-tab-pane label="进件管理" name="importtab">
       <importtab></importtab>
    </el-tab-pane>
  </el-tabs>

    </el-form>
    <menu-dialog ref="menuDialog" @confirm="dialogConfirm" />
  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
.boxone{
      display: flex;
    width: 80%;
    justify-content: space-between;
}

</style>
<script>
import security from "./components/security"
import account from "./components/Account"
import banklist from "./components/bank"
import importtab from "./components/importtab"
import permission from "@/directive/permission/index.js";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { getMchInfo } from '@/api/sysSetUp'
import {
  find,
  update,
  addOrUpdateMchMenu,
  initISVData,
  resetPwd,
  wxImport,
  wxSelectApply,

} from "@/api/sysMch";
import { checkUserExists } from "@/api/sysUser";
import MenuDialog from "./components/MenuDialog";
import md5 from "js-md5";
export default {
  name: "sysMch-details",
  components: {
    Distpicker,
    MenuDialog,
    banklist,
    importtab,
    account,
    security
  },
  directives: { permission },
  data() {
    return {
      classshow:null,
      detailsId: null,
      activeName:'first',
      id: "",
      clicked: false, // 按钮防双击
      district: { province: 350000, city: 350200, area: 350203 },
      form: {
        id: "",
        name: "",
        shortName: "",
        linkman: "",
        phone: "",
        remark: "",
        areaId: 440000,
        areaName: "广东省广州市海珠区",
        address: "",
        status: 0,
        logo: "",
        scopeType: "",
      },
      renovationDisabled: false,
       importform:{},
       importarray:[],
       time:null,
       shopgetinfo:{
         name:"",
         telephone:'',
         address:'',
         shopCategoryName:'',
         background:'',
         bankName:'',
         bankNum: null,
         license:null,
         idCardFront:null,
         idCardBack:null,
         bankinfoPhoto:null,
         thedoor:null,
         food:null,
         scene:null,
         promoterPhoto:null,
         otherPhoto:null,
         qrcode:null,
         brokerage:null,
         bankType:"",
         bankId	:""
       },
       MuchShow:false
    };
  },

  watch: {
    // 路由地址不变的情况下,如果id变化则重新获取数据
    $route(newVal, oldVal) {
      console.log(newVal);
      if (newVal.name == "sysMch-edit" && newVal.query.id != this.id) {
        this.getMchInfo();
      }
    },
  },
  created() {
    this.detailsId = this.$route.query.id;
    // this.getData();
    this.getMchInfo()
  },
      filters: {
    mchTypeFormatter (val) {
     if (val == 1) {
        return '标准版'
      }  else if (val == 2) {
        return '餐饮版'
      } else if (val == 3) {
       return '水站版'
     }
       else if (val == 4) {
        return '商超版'
      }
       else if (val == 5) {
        return '景区版'
      }
    }},

  methods: {
    getMchInfo(){
       const params = new URLSearchParams()
        params.append('mchId', this.detailsId)
      getMchInfo(params).then(res=>{
          this.shopgetinfo=res.data
          this.shopgetinfo.scopeType =JSON.stringify(res.data.scopeType)
          this.shopgetinfo.bankType =JSON.stringify(res.data.bankType)
           this.shopgetinfo.bankId =JSON.stringify(res.data.bankId)
                   const reg = /.+?(省|市|自治区|自治州|县|区)/g
          // console.log(this.form.address.match(reg)[0])
          this.district.province = res.data.areaName.match(reg)[0]
          this.district.city = res.data.areaName.match(reg)[1]
          this.district.area = res.data.areaName.match(reg)[2]
      })
    },
    editlist() {
      this.$router.push({
        path: "/sysMch/edit",
        query: { id: this.detailsId },
      });
    },
    // getData() {
    //   this.id = this.$route.query.id;
    //   const _this = this;
    //   find(this.id)
    //     .then((response) => {
    //       let sysMch = response.data.sysMch;
    //       _this.form.id = sysMch.id;
    //       _this.form.name = sysMch.name;
    //       _this.form.shortName = sysMch.shortName;
    //       _this.form.address = sysMch.address;
    //       _this.form.areaName = sysMch.areaName;
    //       _this.form.areaId = sysMch.areaId;
    //       _this.form.linkman = sysMch.linkman;
    //       _this.form.phone = sysMch.phone;
    //       _this.form.remark = sysMch.remark;
    //       _this.form.logo = sysMch.logo;
    //       _this.form.scopeType = JSON.stringify(sysMch.scopeType);
    //       _this.form.status = 0;
    //       _this.district = utils.decodeArea(sysMch.areaId);
    //     })
    //     .catch((error) => {});
    // },
    dialogShow() {
      console.log("开启菜单选择弹窗");
      this.mchId = this.detailsId;
      this.$refs.menuDialog.show(this.detailsId);
    },
    dialogConfirm(menus, callback) {
      const _this = this;
      const params = new URLSearchParams();
      params.append("id", this.mchId);
      var list = [];
      menus.forEach(function (item) {
        list.push(item.id);
      });
      addOrUpdateMchMenu(params, list)
        .then((response) => {
          console.log(response);
          callback(false);
        })
        .catch(() => {
          callback(false);
        });
    },
    pluginClick() {
      this.$router.push({
        path: "/sysPlugin/list",
        query: { mchId: this.detailsId },
      });
    },
    initISVDataFn() {
      this.$confirm('此操作将执行一键装修, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = { mchId: this.detailsId }
        initISVData(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '装修成功!' });
          this.renovationDisabled = true
        }).catch(() => {
          this.$message({ type: 'info', message: '装修失败!' });
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消装修'});
      });
    },
    resetPwd(row) {
      console.log(row);
      this.$confirm("确定要重置密码为用户名吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          resetPwd(this.detailsId)
            .then((resolve) => {
              console.log(resolve);
              this.$message({
                type: "success",
                message: "重置后密码为用户名!",
              });
            })
            .catch((error) => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置",
          });
        });
    },
    handleClick(val){

    }
  },
};
</script>
